<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 整体样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
            color: #333;
            line-height: 1.8;
            margin: 0;
            padding: 16px;
            background: #fff;
        }

        /* 一级标题 */
        h1 {
            font-size: 24px;
            font-weight: bold;
            color: #1a1a1a;
            margin: 32px 0 16px;
            line-height: 1.4;
        }

        /* 二级标题 */
        h2 {
            font-size: 20px;
            font-weight: bold;
            color: #1a1a1a;
            margin: 24px 0 16px;
            line-height: 1.4;
        }

        /* 正文段落 */
        p {
            font-size: 16px;
            margin: 16px 0;
            color: #333;
            line-height: 1.8;
        }

        /* 强调文本 */
        strong {
            color: #1a1a1a;
            font-weight: bold;
        }

        /* 引用块 */
        blockquote {
            margin: 16px 0;
            padding: 16px 24px;
            background: #f7f7f7;
            border-left: 4px solid #e6e6e6;
            color: #666;
        }

        /* 图片容器 */
        .img-container {
            margin: 24px 0;
            text-align: center;
        }

        /* 图片 */
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* 图片说明文字 */
        .img-caption {
            font-size: 14px;
            color: #999;
            text-align: center;
            margin-top: 8px;
        }

        /* 分隔线 */
        hr {
            border: none;
            border-top: 1px solid #e6e6e6;
            margin: 32px 0;
        }
    </style>
</head>
<body>
    <!-- 文章标题示例 -->
    <h1>一级标题</h1>
    
    <!-- 正文段落示例 -->
    <p>这是正文段落的样式，字体采用系统默认的中文字体，行高为1.8，颜色为深灰色。段落之间有合适的间距，确保阅读体验。</p>
    
    <!-- 二级标题示例 -->
    <h2>二级标题</h2>
    
    <!-- 带强调的段落示例 -->
    <p>这是包含<strong>强调文本</strong>的段落示例。强调文本使用粗体显示，颜色较深。</p>
    
    <!-- 引用块示例 -->
    <blockquote>
        这是引用块的样式，背景色为浅灰色，左边有醒目的竖线装饰。
    </blockquote>
    
    <!-- 图片示例 -->
    <div class="img-container">
        <img src="示例图片.jpg" alt="示例图片">
        <div class="img-caption">图片说明文字</div>
    </div>
</body>
</html>
